<template>
  <div class="EcharstContent">
    <!-- 头部区域 -->
     <div class="heaber">
       <h1>数据可视化-Echarts</h1>
       <div class="shouTime">{{dateTime}}</div>
     </div>
     <!-- 页面主体部分 -->
     <div class="content">
        <div></div>
        <div></div>
    <div>
    </div>
  </div>
  </div>
</template>
<script src="./utilte/flexible.js"></script>
<script>
/*
基于Flexibli.js 智能大屏适配
Flex布局
less使用

*/ 
export default {
  data() {
    return {
      Echatrs: 'Echatrs',
      dateTime: null,
      t: null
    }
  },
  mounted() {
    this.gitDtae()
  },
  methods: {
    //addZero = val => val.lenght < 2 ? '0' : val,
    gitDtae() {
      var getDate = new Date() 
      console.log(getDate, 'lhl');
      let getYear = getDate.getYear()
      let getMonth = getDate.getMonth() + 1
      let getDAte = getDate.getDate()
      let getHours = getDate.getHours()
      let getMintes = getDate.getMinutes()
      let getSecond = getDate.getSeconds()
      getMonth = getMonth < 10 ? '0' + getMonth : getMonth
      getDAte = getDAte < 10 ? '0' + getDAte : getDAte
      getHours = getHours < 10 ? '0' + getHours : getHours
      getMintes = getMintes < 10 ? '0' + getMintes : getMintes
      getMonth = getSecond < 10 ? '0' + getSecond : getSecond
      return this.dateTime = `${getYear}-${getMonth}-${getDAte}-${getHours}-${getMintes}-${getSecond}`
    }
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.EcharstContent{
  width: 100%;
  height: 100%;
  background:steelblue;
  overflow: hidden;
  .heaber {
    width: 100%;
    height: 50px;
    background:lightblue;
    position: relative;
    h1{
      line-height: 50px;
      text-align: center;
      color:white;
    }
    .shouTime{
      position: absolute;
      top: 0;
      right: 30px;
      line-height: 50px;
      font-size: 20px;
      color: rgba(255, 255, 0.7)
    }

  }
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 10px 10px 0;
    // background:lawngreen;
     div:nth-child(1){
       flex: 3;
       border: 1px solid pink;
     }
      div:nth-child(2){
       flex: 5;
       border: 1px solid pink;
     }
      div:nth-child(3){
       flex: 2;
       border: 1px solid pink;
     }
     
  }

}
</style>